﻿/*
Copyright (c) Microsoft Corporation. All rights reserved
*/

#header {
    padding: 15px 0px 30px 52px;
}

#statusMessage {
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
}

#footer {
    padding: 25px 10px;
}

    #footer span {
        font-size: 12px;
    }

    #footer .links {
        color: rgb(153,153,153);
    }

        #footer .links a {
            color: rgb(153,153,153);
            font-size: 12px;
            text-decoration: none;
        }

        #footer .links .pipe {
            font-size: 9px;
        }

button.splitViewButton {
    position: absolute;
    height: 48px;
    width: 48px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border: none;
    margin: 0;
    background-color: transparent;
}

    button.splitViewButton:hover {
        background-color: rgba(255,255,255, 0.1);
    }

    button.splitViewButton:active {
        background-color: rgba(255,255,255, 0.2);
    }

    button.splitViewButton:after {
        position: relative;
        font-size: 24px;
        font-family: 'Segoe MDL2 Assets';
        content: "\E700";
    }

.win-splitview-pane {
    display: flex;
    flex-direction: column;
}

    .win-splitview-pane #scenarioPane {
        flex-grow: 1;
    }

.win-splitview-pane-hidden #header,
.win-splitview-pane-hidden #footer {
    display: none;
}

.win-splitview-content .splitViewButton {
    display: none;
}

.hiding .win-splitview-content .splitViewButton,
.win-splitview-pane-hidden .win-splitview-content .splitViewButton {
    display: block;
}

#contentWrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#statusBox {
    flex-shrink: 0;
}

#contentHost {
    margin: 10px;
    padding: 0px 42px 10px 42px;
    height: 100%;
    overflow-y: auto;
}

    #contentHost #sampleHeader, #featureLabel {
        font: 20pt/24pt "Segoe UI";
        font-weight: 300;
        white-space: normal;
    }

    #contentHost #scenarioDescription {
        font: 11pt/15pt "Segoe UI";
        font-weight: 300;
    }